<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
        
        <title>Container and Jumbo Documentation</title>
        
        <script src="/js/greyspots.js" type="text/javascript"></script>
        <link href="/css/greyspots.css" type="text/css" rel="stylesheet" />
        
        <script src="/js/ace/ace.js" data-ace-base="/js/ace/" type="text/javascript" charset="utf-8"></script>
        <script src="/js/ace/ext-language_tools.js" type="text/javascript"></script>
        <script src="/js/ace/ext-searchbox.js" type="text/javascript"></script>
        
        <script src="doc-library/doc.js" type="text/javascript"></script>
        <link href="doc-library/doc.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <gs-jumbo>
            <h1 class="text-center">Container And Jumbo</h1>
        </gs-jumbo>
        
        <gs-container padded>
            <h3>Tags:</h3>
            <pre><code>&lt;gs-container&gt;...&lt;/gs-container&gt;

&lt;gs-jumbo&gt;...&lt;/gs-jumbo&gt;

&lt;gs-jumbo&gt;
    &lt;gs-container&gt;...&lt;/gs-container&gt;
&lt;/gs-jumbo&gt;</code></pre>
            
            <h3>Description:</h3>
            <p>These elements provide desktop and mobile aware containers for your applications. These containers are useful for building static webpages that look good on phones, tablets and desktop devices.</p>
            
            <h1>Examples:</h1>
            <div class="doc-example-description">
                <span class="h3">Skeleton Container Example:</span>
                <p>A basic <code>&lt;gs-container&gt;</code> element with a header and paragraph. It will resize to the window and flow text.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <gs-container>
                        <h1>Test</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    </gs-container>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Attribute "padded":</span>
                <p>To add padding to a <code>&lt;gs-container&gt;</code> you just add the "padded" attribute.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <gs-container padded>
                        <h1>Test</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    </gs-container>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Attribute "min-width":</span>
                <p>The <code>"min-width"</code> attribute is for telling the <code>&lt;gs-container&gt;</code> to snap to particular width when the window reaches certain points. In this example the container will change it's width when the window is 300px or wider, 500px or wider and 700px or wider.<br/>
                &nbsp;<b>Note 1:</b> resize the window to see this behaviour.<br />
                &nbsp;<b>Note 2:</b> When the window snaps to a width (e.g. 500px) it might (depending on OS and OS settings) be a little thinner than 500px to make room in case there is a scrollbar next to the container.</p>
                
                <p>The <code>"min-width"</code> attibute takes a list of widths seperated by semi-colons. Precedence for the font-sizes is determined by order, so the last width is more important that the first.</p>
                
                Here are some shortcuts for pre-set widths:
                <ol>
                    <li>All instances of "small" or "sml" are replaced with "768px"</li>
                    <li>All instances of "medium" or "med" are replaced with "992px"</li>
                    <li>All instances of "large" or "lrg" are replaced with "1200px"</li>
                </ol>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <gs-container min-width="200px;300px;500px;700px;lrg;">
                        <h1>Test</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    </gs-container>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Attribute "media":</span>
                <p>The <code>"media"</code> attribute is for telling the <code>&lt;gs-container&gt;</code> to snap to particular width based on <a href="https://developer.mozilla.org/docs/Web/CSS/Media_Queries/Using_media_queries">CSS Media Queries</a>.</p>
                
                <p>The <code>"media"</code> attribute takes a list of expressions seperated by semi-colons. The format of these expressions is "&lt;MEDIA-SELECTOR&gt; {&lt;WIDTH&gt;};". Precedence for these expressions is determined by order, so the last expression is more important that the first.</p>
                
                Here are some shortcuts for pre-set widths:
                <ol>
                    <li>All instances of "small" or "sml" are replaced with "768px"</li>
                    <li>All instances of "medium" or "med" are replaced with "992px"</li>
                    <li>All instances of "large" or "lrg" are replaced with "1200px"</li>
                </ol>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <gs-container media="all {small}; (min-width: medium) {medium}; print {600px};">
                        <h1>Test</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    </gs-container>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Skeleton Jumbo Example:</span>
                <p>A basic <code>&lt;gs-jumbo&gt;</code> element with a header and paragraph. It will resize to the window and flow text. This element is for making content large.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <gs-jumbo>
                        <h1>Test</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    </gs-jumbo>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Jumbo with Container Min Width Example:</span>
                <p>A <code>&lt;gs-container&gt;</code> within a <code>&lt;gs-jumbo&gt;</code> with a header and paragraph. The Jumbo background will be full width, the gs-container will snap to certain widths.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <gs-jumbo>
                        <gs-container min-width="sml;med;lrg">
                            <h1>Test 1</h1>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        </gs-container>
                    </gs-jumbo>
                    <gs-container min-width="sml;med;lrg">
                        <h1>Test 2</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    </gs-container>
                </template>
            </gs-doc-example>
        </gs-container>
    </body>
</html>